<template v-if="bye">
  <div style="padding: 14px 14px 0">
    <RouteTitle />
    <a-row align="middle" style="margin: 10px 0; width: 100%" justify="space-between">
      <a-col>
        <a-space>
          <a-button type="primary" style="border: none; border-radius: 5px" @click="emptyRecycleBin">
            <template #icon>
              <DeleteOutlined />
            </template>清空回收站
          </a-button>
          <a-col style="color: #9ea4aa">提示：回收站不占用储存空间，文件保存10天后将被自动清除。
          </a-col>
        </a-space>
      </a-col>

      <a-col v-if="selectedRowKeys.length">
        <a-button type="text" @click="deleteClick">
          <template #icon>
            <DeleteOutlined />
          </template>删除
        </a-button>
        <a-button type="text" @click="downloadClick">
          <template #icon>
            <download-outlined />
          </template>
          下载
        </a-button>
        <a-button type="text" @click="revertClick">
          <template #icon>
            <reload-outlined />
          </template>
          还原
        </a-button>
      </a-col>
    </a-row>
    <a-table :row-selection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }" :columns="columns" :data-source="dataSource" :loading="loading" :pagination="pagination"
      @change="handleTableChange" rowKey="id" class="table">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'title'">
          <a-row class="name-temlate">
            <a-col>
              <div v-if="
                record.material_url ||
                (record.resource_type == 'text' && record.is_folder !== 1)
              " class="image-box">
                <div v-if="record.resource_type == 'video'">
                  <img v-if="record.thumb_url" :src="record.thumb_url" alt="" style="width: 50px; height: 50px">

                  <video v-else :src="record.material_url" style="width: 50px; height: 50px"></video>

                </div>

                <img v-if="record.resource_type == 'image'" :src="record.thumb_url || record.material_url" style="
                    width: 50px;
                    height: 50px;
                    border-radius: 4px;
                    object-fit: contain;
                  " />
                <cu-icon v-if="record.resource_type == 'audio'" class="icon" type="icon-yuyinwenjian"
                  style="font-size: 50px; cursor: pointer" />
                <cu-icon v-if="record.resource_type == 'text'" class="icon" type="icon-wenan" style="font-size: 50px" />
                <div class="image-mask" @click="previewImg(record)" v-if="record.resource_type !== 'text'">
                  <eye-filled class="icon-eye-filled" />
                </div>
              </div>

              <div v-else>
                <cu-icon class="icon" type="icon-wenjianjia1" />
                <cu-icon class="icon icon-postion" :type="iconData[record.resource_type]" />
              </div>
            </a-col>
            <a-col class="name-sub-title">
              <div>
                {{ record.title }}
              </div>
              <div>{{ record.resourceSize }}</div>
            </a-col>
          </a-row>
        </template>
        <template v-if="column.key == 'remain_days'">
          <span> {{ record.remain_days }}天 </span>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="text" style="color: var(--ss-primary-color)" @click="revertClick(record)">还原</a-button>
            <a-button type="text" style="color: var(--ss-primary-color)" @click="downloadClick(record)">下载</a-button>
            <a-button type="text" style="color: var(--ss-primary-color)" @click="deleteClick(record)">删除</a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <!-- 导出弹框 -->
    <ExportMdal :visible="visibleExport" @cacel="visibleExport = false" />

    <!-- 预览图片 -->
    <PreviewImg :visible="visibleImage" @onCancel="visibleImage = false" :url="previewImgUrl" :title="previewTitle"
      :type="typeChange" />
        <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  createVNode,
  ref,
  computed,
} from "vue";
import {
  DeleteOutlined,
  DownloadOutlined,
  ReloadOutlined,
  EyeFilled,
} from "@ant-design/icons-vue";
import { message, Modal, notification } from "ant-design-vue";
import ExportMdal from "../components/ExportMdal/index.vue";
import request from "../../../common/utils/request";
import PreviewImg from "../../../components/PreviewModal/index.vue";
import store from "@/store/index.js";
import { useRoute, useRouter } from "vue-router";
import { onBeforeRouteLeave } from "vue-router";
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'

export default defineComponent({
  name: "RecycleBin",
  components: {
    DeleteOutlined,
    DownloadOutlined,
    ReloadOutlined,
    vipModal,
    ExportMdal,
    EyeFilled,
    PreviewImg,
  },
  setup() {
    const state = reactive({
      vipVisible:false,
      bye: true,
      count: 0,
      columns: [
        {
          title: "文件名",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "删除时间",
          dataIndex: "created_at",
          key: "created_at",
        },
        {
          title: "剩余有效期",
          dataIndex: "remain_days",
          key: "remain_days",
        },
        {
          title: "操作",
          key: "action",
        },
      ],
      dataSource: [],

      selectedRowKeys: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      visibleExport: false,

      iconData: {
        image: "icon-tupian11",
        audio: "icon-yuyin",
        text: "icon-zhinengwenan",
        video: "icon-shipin",
      },

      visibleImage: false,
      previewImgUrl: "",
      previewTitle: "",
      typeChange: "",
    });

    const route = useRoute();
    const router = useRouter();
    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getDeleteList();
    };

    const getDeleteList = () => {
      let params = {
        page: state.page,
        pageSize: state.pageSize,
      };
      state.loading = true;
      request
        .get("/work_ai", "/user/shotstack/folder/delete/list", params)
        .then((res) => {
          state.dataSource = res.result.list;
          state.loading = false;
          state.total = res.result.total;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    getDeleteList();

    const emptyRecycleBin = () => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true
      } else {
        Modal.confirm({
          title: "提示",
          icon: "",
          content: "确定清空回站吗？",
          cancelText: "取消",
          okText: "确定",
          onOk() {
            request
              .del("/work_ai", "/user/shotstack/folder/delete/list", {
                is_all: 1,
              })
              .then((res) => {
                message.success("清理成功");
                getDeleteList();
              });
          },
        });

      }

    };

    // 还原
    const revertClick = (record) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true

      } else {
        Modal.confirm({
          title: "提示",
          icon: "",
          content: "确定要还原吗？",
          cancelText: "取消",
          okText: "确定",
          onOk() {
            let params = {
              material_recovery_ids: [record.id],
            };
            if (!record.id) {
              params.material_recovery_ids = state.selectedRowKeys;
            }
            request
              .put("/work_ai", "/user/shotstack/folder/delete/list", params)
              .then((res) => {
                message.success("还原成功");
                getDeleteList();
              });
          },
        });

      }

    };

    // 下载
    const downloadClick = (data) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true

      } else {
        let params = {};
        if (data.id) {
          params.ids = [data.id];
        } else if (state.selectedRowKeys.length) {
          params.ids = state.selectedRowKeys;
        }

        request
          .put("/work_ai", "/user/shotstack/folder/delete/download", params)
          .then((res) => {
            state.visibleExport = true;
          });

      }

    };

    // 删除
    const deleteClick = (record) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        state.vipVisible = true
      } else {
        Modal.confirm({
          title: "提示",
          icon: "",
          content: "确定删除吗？",
          cancelText: "取消",
          okText: "确定",
          onOk() {
            let params = {
              is_all: 0,
              material_recovery_ids: [record.id],
            };
            if (!record.id) {
              params.material_recovery_ids = state.selectedRowKeys;
            }
            request
              .del("/work_ai", "/user/shotstack/folder/delete/list", params)
              .then((res) => {
                message.success("删除成功");
                state.page = 1
                getDeleteList();
              });
          },
        });

      }

    };

    const reductionClick = () => {
      Modal.confirm({
        title: "提示",
        icon: "",
        content: "确定还原吗？",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    };

    // 预览
    const previewImg = (data) => {
      state.previewImgUrl = data.material_url;
      state.previewTitle = data.title;
      state.typeChange = data.resource_type;
      state.visibleImage = true;
    };

    onBeforeRouteLeave((to, from, next) => {
      state.bye = false
      next(true)
    });

    return {
      ...toRefs(state),
      onSelectChange,
      revertClick,
      downloadClick,
      deleteClick,
      handleTableChange,
      pagination,
      reductionClick,
      emptyRecycleBin,
      previewImg,
    };
  },
});
</script>

<style lang="less" scoped>
.table {
  .name-temlate {
    position: relative;

    .icon {
      font-size: 50px;
    }

    .icon-postion {
      position: absolute;
      top: 17px;
      left: 15px;
      font-size: 22px;
    }

    .image-box {
      position: relative;

      .image-mask {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50px;
        height: 50px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 1;
        color: #fff;
      }
    }
  }

  .name-sub-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
  }
}
</style>
